<template>
  <div class="detail">
    <b-container>
      <b-row>
        <b-col cols="12" class="border _detail mt-3">
          <b-row>
            <b-col md="4">
              <h4>标题XXX</h4>
              <ul>
                <li>发布人: <router-link :to="{name:'Usercenter'}">勇敢牛牛</router-link>  </li>
                <li>创建时间:XXXX-XXX-XXX-XX</li>
                <li>点赞数:XXXX</li>
              </ul>
            </b-col>
            <b-col md="6">
              <!-- 头像 -->
              <b-img
                thumbnail
                fluid
                :src="userimg"
                width="40"
                alt="Image 1"
                class="_margin"
              ></b-img>
              <ul>
                <li>
                  话题分类:
                  <b-button-group size="sm">
                    <b-button
                      variant="info"
                      v-for="(item, index) in options"
                      :key="index"
                      :to="{ name: 'Classify' }"
                      >{{ item }}</b-button
                    >
                  </b-button-group>
                </li>
                <li>评论数:XXXX-XXX-XXX-XX</li>
                <li>阅读量:XXXX</li>
              </ul>
            </b-col>
            <b-col md="2" class="mt-5">
              <b-button variant="danger">回复评论</b-button>
            </b-col>
          </b-row>
        </b-col>
      </b-row>
    </b-container>
    <b-container class="mt-4">
      <b-row>
        <b-card no-body>
          <b-tabs card>
            <b-tab title="详情" active>
              <b-card-text>
                <b-row>
                  <b-col md="6">
                    <Carousel />
                  </b-col>
                </b-row>
                <div>
                  <h2>{{content.title}}</h2>
                  <div v-html="content.body"></div>
                </div>
              </b-card-text>
            </b-tab>
            <b-tab title="评论">
              <b-card-text>
                <b-card>
                  <b-media>
                    <!-- <b-row> -->
                    <div class="d-flex">
                      <b-img
                        thumbnail
                        fluid
                        :src="userimg"
                        width="60"
                        alt="Image 1"
                      ></b-img>
                      <div style="margin-left: 10px">
                        <b>用户名称</b>
                        <p>简介:</p>
                      </div>
                    </div>
                    <span class="spancolor">41 人赞了该评论</span>
                    <p>
                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                      scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                      vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                      vulputate fringilla. Donec lacinia congue felis in faucibus.
                    </p>
                    <p>
                      Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
                      leo. Cum sociis natoque penatibus et magnis dis parturient montes,
                      nascetur ridiculus mus.
                    </p>
                  </b-media>
                </b-card>
              </b-card-text>
            </b-tab>
          </b-tabs>
        </b-card>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import Carousel from "../components/Carousel.vue";
export default {
  name: "detail",
  data() {
    return {
      userimg: require("../assets/zhuzhu.jpeg"),
      options: ["前端", "后端", "PHP"],
      content:""
    };
  },
  components: {
    Carousel,
  },
  methods:{
   async   Detaildata(){
    //  console.log(this.$route.query.aid); 
     let params={
       aid:this.$route.query.aid
     }
       let res = await this.$article.article(params)
       this.content=res.data.data[0]
       console.log(res.data.data[0]);
     }
  },
  created(){
  this.Detaildata()
  }
};
</script>

<style lang="scss">
.detail {
  color: black;
  ul {
    list-style: none;
  }
  ._margin {
    margin-left: 30px;
  }
  ._container {
    padding: 0px;
  }
  .card-header {
    background: #ffffff;
  }
  ._detail {
    padding: 10px;
    margin-bottom: 10px;
    border-top: none;
    border: 1px solid #8989;
    border-radius: 15px;
    box-shadow: 0px 0px 3px #ffffff;
  }
}
</style>
